<template>
  <div class="tabbar" :style="{'backgroundColor':backgroundcolor}">
     <tabbar-item :routePath="item.routePath" :color="color" v-for="item in tabbarList" :key = "item.routePath">
        <template v-slot:item-img><img :src="item.imgUrl" alt=""></template>
        <template v-slot:item-img-active><img :src="item.imgUrlActive" alt=""></template>
        <!-- <img v-slot:item-img :src="item.imgUrl" alt=""> -->
        <!-- <img slot="item-img-active" :src="item.imgUrlActive" alt=""> -->
        <template v-slot:item-text><div>{{item.text}}</div></template>
        <!-- <div slot="item-text">
          {{item.text}}
        </div> -->
      </tabbar-item>
  </div>
</template>

<script>
import tabbarItem from './tabbarItem.vue'
export default {
  props: {
    backgroundcolor: String,
    tabbarList: {
      type: Array
    },
    color: {
      type: String
    }
    // 示例
    // backgroundcolor: '#f2f2f2',
    // color: 'red',
    // tabbarList: [
    //   {
    //     routePath: '/home',
    //     imgUrl: require('./assets/img/tabbar/home.svg'),
    //     imgUrlActive: require('./assets/img/tabbar/home_active.svg'),
    //     text: '首页'
    //   },
    //   {
    //     routePath: '/category',
    //     imgUrl: require('./assets/img/tabbar/category.svg'),
    //     imgUrlActive: require('./assets/img/tabbar/category_active.svg'),
    //     text: '分类'
    //   },
    //   {
    //     routePath: '/cart',
    //     imgUrl: require('./assets/img/tabbar/shopcart.svg'),
    //     imgUrlActive: require('./assets/img/tabbar/shopcart_active.svg'),
    //     text: '购物车'
    //   },
    //   {
    //     routePath: '/profile',
    //     imgUrl: require('./assets/img/tabbar/profile.svg'),
    //     imgUrlActive: require('./assets/img/tabbar/profile_active.svg'),
    //     text: '我的'
    //   }
    // ]
  },
  data () {
    return {
    }
  },
  components: {
    tabbarItem
  }
}
</script>

<style scoped>
.tabbar {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: 0 -1px 2px grey;
}
</style>
